<template>
	<view class="order content">
		<view class="select flex_r_between">
			<view class="left">
				<view class="top" @click="onDateChoose">
					<uni-icons type="calendar-filled" color="#000000" :size="26"></uni-icons>
					<view>{{date || '本月'}}</view>
					<image src="/static/technician/updown.png"></image>
				</view>
				<view class="bottom">
					<text>已结算 ￥{{Number(yijiesuan).toFixed(2)}}</text>
					<text>待结算 ￥{{Number(weijiesuan).toFixed(2)}}</text>
				</view>
			</view>
			<view class="right">
				<view class="item">
					<i></i>
					<text>绿色接单时间</text>
				</view>
				<view class="item" style="margin-top: 20rpx;">
					<i style="background: #D40000;"></i>
					<text>红色结束时间</text>
				</view>
			</view>
		</view>

		<view class="detail">
			<view class="total">
				<view class="title">总计</view>
				<view class="text">订单：{{total}}个</view>
				<view class="text">佣金：¥{{Number(total_price).toFixed(2)}}</view>
			</view>
			<view class="table">
				<scroll-view class="left" :scroll-x="true">
					<u-table border-color="transparent" stripe emptyText="暂无更多数据">
						<!-- 表头行 -->
						<u-tr style="background: #EFEFEF;box-sizing:border-box;">
							<u-th align="center" width="40%">接单/完成时间</u-th>
							<u-th align="center" width="30%">订单数量</u-th>
							<u-th align="ceter" width="50%">服务人信息</u-th>
							<u-th align="ceter" width="40%">订单编号</u-th>
							<u-th align="center" width="30%">佣金</u-th>
						</u-tr>
						<blankPage img="https://qiniu-cdn.maeiyun.com/imgs/blank/no_order.png" text="暂无订单" :width="161" :height="129" v-show="list.length == 0"></blankPage>
						<!-- 表格数据行 -->
						<u-tr style="box-sizing:border-box;" v-for="(item,index) in list" :key="index">
							<u-td align="ceter" width="40%" style="height: auto !important">
								<view class="date">
									<view class="item">
										<i></i>
										<text>{{item.jiedan_time}}</text>
									</view>
									<view class="item">
										<i style="background: #D40000;"></i>
										<text>{{item.end_time}}</text>
									</view>
								</view>
							</u-td>
							<u-td align="ceter" width="30%" style="height: auto !important">
								<view class="num">1</view>
							</u-td>
							<u-td align="ceter" width="50%" style="height: auto !important">
								<text style="font-size:22rpx">姓名：{{item.real_name}}</text>
								<view style="font-size:22rpx">手机号：{{item.mobile}}</view>
							</u-td>
							<u-td align="ceter" width="40%" style="height: auto !important">
								<view style="font-size:22rpx">{{item.order_sn}}</view>
							</u-td>
							<u-td align="ceter" width="30%" style="height: auto !important">
								<view class="price">¥{{Number(item.price).toFixed(2)}}</view>
							</u-td>
						</u-tr>
					</u-table>
				</scroll-view>
			</view>
			<uni-pagination :current="page" :total="total" title="标题文字" :show-icon="true" @change="change" />
			
		</view>
		

		<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :date="info.date"
			:insert="info.insert" :lunar="info.lunar" :startDate="info.startDate" :endDate="info.endDate"
			:range="info.range" @confirm="dateConfirm" />

	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0,
				order_sn: '',
				status: 0,
				result: 0,
				start: '',
				end: '',

				list: [],

				total: 0,
				total_price:0,
				page:1,
				info: {
					lunar: true,
					range: true,
					insert: false,
					selected: []
				},
				date:'',
				
				weijiesuan:0,
				yijiesuan:0,
			}
		},
		methods: {
			goback() {
				uni.navigateBack()
			},
			onTab(e) {
				this.type = e
			},
			remove() {
				this.order_sn = ''
				this.status = 0
				this.result = 0
				this.start = ''
				this.end = ''
			},
			onSelect() {
				this.$refs.search.close()
				this.$util.toUrl('/technician/order/orderSelect')
			},
			getList() {

				this.request.httpTokenRequest({
					url: "technician.technician/getIncome",
					method: "get"
				}, {
					data: this.start + '~' + this.end,
					page:this.page
				}).then(res => {
					if (res.code == 0) {
						this.total = res.data.total
						this.weijiesuan = res.data.weijiesuan
						this.yijiesuan = res.data.yijiesuan
						this.total_price = res.data.price
						res.data.data.forEach(item => {
							this.list.push(item)
						})
					} else {
						this.$util.msg(res.msg)
					}
				}, error => {})
			},
			getLastDayOfMonth() {
				const date = new Date();
				const year = date.getFullYear();
				const month = date.getMonth() + 1 < 10 ? '0' + String(date.getMonth() + 1) : date.getMonth() + 1;
				const lastDay = new Date(year, month, 0).getDate();
				this.start = year + '-' + month + '-' + '01'
				this.end = year + '-' + month + '-' + lastDay
			},
			
			onDateChoose(){
				this.$refs.calendar.open()
			},
			dateConfirm(e){
				this.start = e.range.before
				this.end = e.range.after
				this.date = this.start + '-' + this.end
				this.list = []
				this.getList()
			},
			change(e){
				this.page = e.current
				this.list = []
				this.getList()
			}
		},
		onLoad() {
			this.getLastDayOfMonth()
			this.getList()
		}
	}
</script>

<style lang="less" scoped>
	.order {
		padding: 20rpx 30rpx 30rpx;
	}
	.uni-table th,.uni-table td{  
	    line-height: 30rpx;
		max-height: 80rpx !important;
	}
	.uni-table-td {
		max-height: 80rpx !important;
	}
	.nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;
		padding-top: var(--status-bar-height);
		background: #F5F7F8;
	}

	.tab {
		margin-top: 30rpx;

		.item {
			position: relative;

			text {
				font-size: 30rpx;
				color: #08090A;
				line-height: 42rpx;
			}

			i {
				position: absolute;
				width: 50rpx;
				height: 10rpx;
				background: rgba(239, 82, 51, 0.6);
				border-radius: 6rpx;
				bottom: 6rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}

	.select {
		width: 690rpx;
		height: 210rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0) 100%);
		border-radius: 20rpx;
		margin: 30rpx 0 0;
		padding: 30rpx 30rpx 0;

		.left {
			height: 100%;

			.top {
				display: flex;
				align-items: center;
				margin-bottom: 18rpx;

				view {
					font-size: 26rpx;
					color: #08090A;
					line-height: 37rpx;
					margin: 0 11rpx 0 8rpx;
				}

				image {
					width: 20rpx;
					height: 20rpx;
				}
			}

			.bottom {
				display: flex;
				align-items: center;

				text {
					font-size: 22rpx;
					color: #929292;
					line-height: 30rpx;
					margin-left: 30rpx;
				}
			}
		}

		.right {
			height: 100%;

			.item {
				display: flex;
				align-items: center;

				i {
					width: 10rpx;
					height: 10rpx;
					background: #00AD26;
				}

				text {
					font-size: 20rpx;
					color: #ADADAD;
					line-height: 28rpx;
					margin-left: 10rpx;
				}
			}
		}
	}

	.detail {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-top: -60rpx;

		.table {
			min-height: 50vh;
			td {
				padding: 0 20rpx !important;
			}
			.left {
				.num {
					text-align: center;
					height: 30rpx;
					font-size: 22rpx;
					color: #333333;
					line-height: 30rpx;
				}
				.date {
					display: flex;
					align-items: center;
					justify-content: space-around;
					flex-direction: column;
					.item {
						display: flex;
						align-items: center;

						i {
							width: 10rpx;
							height: 10rpx;
							background: #00AD26;
							border-radius: 50%;
							margin-right: 6rpx;
						}

						text {
							font-size: 20rpx;
							color: #333333;
							line-height: 28rpx;
						}
					}
				}

				.status {
					font-size: 22rpx;
					color: #929292;
					line-height: 30rpx;
				}
				.price {
					font-size: 22rpx;
					font-weight: 600;
					color: #EF5233;
				}
			}
		}

		.total {
			display: flex;
			height: 84rpx;
			margin-bottom: 20rpx;

			.title {
				width: 30%;
				height: 100%;
				box-sizing: border-box;
				background: rgba(255, 0, 0, 0.1);
				border: 1rpx solid #E10404;
				text-align: center;
				line-height: 82rpx;
				font-size: 34rpx;
				color: #FD3530;
			}

			.text {
				width: 35%;
				height: 100%;
				box-sizing: border-box;
				border: 1rpx solid #E10404;
				text-align: center;
				line-height: 82rpx;
				font-size: 22rpx;
				color: #FD3530;
			}
		}

	}

	.search {
		width: 70vw;
		background: #FFFFFF;
		height: 100%;
		box-sizing: border-box;
		padding-bottom: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.card {
			padding: 30rpx;

			input {
				width: 446rpx;
				height: 60rpx;
				background: #F5F6F7;
				border-radius: 40rpx;
				padding: 10rpx 27rpx;
				box-sizing: border-box;
				font-size: 28rpx;
			}

			.title {
				font-size: 28rpx;
				color: #000000;
				line-height: 40rpx;
				margin-bottom: 20rpx;
			}

			.tag {
				text {
					width: 130rpx;
					height: 60rpx;
					border-radius: 30rpx;
					border: 1rpx solid #D7D7D7;
					text-align: center;
					line-height: 60rpx;
					font-size: 24rpx;
					color: #000000;
				}

				#select {
					background: rgba(46, 126, 250, 0.1);
					border: 1rpx solid #2E7EFA;
					color: #2F7CFC;
				}
			}

			.time {
				.date {
					width: 210rpx;
					height: 60rpx;
					background: #F3F3F3;
					border-radius: 30rpx;
					text-align: center;
					line-height: 60rpx;

					view {
						font-size: 24rpx;
						color: #000000;
					}

					text {
						color: #979797;
					}
				}
			}
		}

		.line {
			width: 100%;
			height: 30rpx;
			background: #D8D8D8;
			opacity: 0.5;
		}

		.btnbox {
			background: url(https://qiniu-cdn.maeiyun.com/imgs/technician/index/order_list_btn_bg.png) 0 0 no-repeat;
			background-size: 100%;
			width: 448rpx;
			height: 76rpx;
			margin: 30rpx auto;
			box-sizing: border-box;

			.btn {
				width: 50%;
				height: 76rpx;
				font-size: 30rpx;
				line-height: 76rpx;
				text-align: center;
			}

			.btn1 {
				color: #2F7CFC;
			}

			.btn2 {
				color: #FFFFFF;
			}
		}
	}
</style>